<!-- effectScope 同一作用域多次运行演示 -->
<script setup>
import { computed, watch, watchEffect, effectScope, ref } from "vue";

const scope = effectScope(); // 创建作用域
const counter = ref(0);
const doubled = computed(() => counter.value * 2);

// 第一次 run：注册 computed 和两个 watcher
scope.run(() => {
  watch(doubled, () => {
    console.log("%c[watch] doubled: " + doubled.value, "color: #1abc9c");
  });

  watchEffect(() => {
    console.log("%c[watchEffect] Count: " + doubled.value, "color: #e67e22");
  });
});

// 第二次 run：在同一作用域内添加新的副作用
scope.run(() => {
  watch(counter, () => {
    console.log("%c[第二次 run] counter 改变", "color: #3498db");
  });
});

// 停止作用域（会统一销毁以上所有 watch / watchEffect）
const stopAll = () => {
  console.log(
    "%c停止作用域，所有副作用将销毁",
    "color: red; font-weight: bold;"
  );
  scope.stop();
};
</script>

<template>
  <div style="padding: 20px">
    <h3>effectScope：同一作用域多次运行演示</h3>
    <p>Count: {{ counter }} | Doubled: {{ doubled }}</p>

    <button @click="counter++">增加</button>
    <button @click="stopAll">停止作用域</button>

    <p style="color: #666; font-size: 14px; margin-top: 10px">
      打开控制台查看日志：不同颜色代表不同副作用。<br />
      点击“停止作用域”后，再增加数值将不会触发任何输出。
    </p>
  </div>
</template>

<style scoped>
button {
  margin-right: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
